<!--
  @desc: 审批同意
  @author: liuyun
-->
<template>
  <div id="bg">
    <Header :title="title" :switchHeader='switchHeader'></Header>
    <!-- 审批操作 -->
    <div class="approver">
      <md-field>
        <md-field-item
            title="审批操作"
            :content="selectorValue"
            @click="showSelector"
            arrow
            solid
          />
        </md-field>
        <md-selector
          v-model="isSelectorShow"
          default-value="2"
          :data="data[0]"
          max-height="320px"
          title="审批操作"
          large-radius
          @choose="onSelectorChoose"
        >
        </md-selector>
    </div>
    <!-- 审批意见 -->
    <div class="opinionDetails">
      <span class="opinion">审批意见</span>
      <textarea cols="30" rows="10" placeholder="同意，麻烦XXX一并审批" @input="valueInput" v-model="value"></textarea>
      <span class="record" @click="check">审批记录</span>
    </div>
    <!-- 按钮组 -->
    <div class="selctbtn">
          <div class="btn1">取消</div>
          <div class="btn2">提交</div>
    </div>
  </div>
</template>

<script>
import Header from '../../../components/Header'
import {Selector, Field, FieldItem} from 'mand-mobile'

export default {
  data () {
    return {
      title: '提交审批',
      txtVal: 0,
      switchHeader: true,
      value: '',
      isSelectorShow: false,
      selectorValue: '同意',
      data: [
        [
          {
            value: '1',
            text: '同意'
          },
          {
            value: '2',
            text: '有条件同意',
            brief: '文字说明，说明说明'
          },
          {
            value: '3',
            text: '不同意'
          },
          {
            value: '4',
            text: '转他人审批'
          },
          {
            value: '5',
            text: '征求意见'
          }
        ]
      ]
    }
  },
  methods: {
    valueInput: function () {
      this.txtVal = this.value.length
    },
    check: function () {
      this.$router.push('/descript')
    },
    showSelector () {
      this.isSelectorShow = true
    },
    onSelectorChoose ({text}) {
      this.selectorValue = text
    }
  },
  components: {
    Header,
    [Selector.name]: Selector,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem
  }
}
</script>

<style lang='stylus' scoped>
  #bg {
    width: 100%;
    height: 100vh;
    background: rgba(244, 244, 244, 1);
    position: relative;
  }

  .approver {
    width:90%;
    margin:5px auto;
    background:rgba(255,255,255,1);
    border-radius: 0.3rem;
  }
  .md-field{
    padding: 0.1rem .5rem;
    border-radius: 0.3rem;
    margin-top: 0.3rem;
  }
  /deep/ .md-field-item.is-solid .md-field-item-title{
    width: 1.633333rem;
    }
  /deep/ .md-field-item-title{
    font-size:0.366667rem;
    }
  /deep/ .md-field-item-control {
    font-size:0.366667rem;
    position: absolute;
    right: 0.4rem;
    color: #433036;
  }
  // 去掉下边框
  /deep/ .md-field-item-content::before{
    border-bottom: none;
  }
  /deep/ .md-field-item-right .md-icon-arrow-right{
    color:#5A4347;
  }
  /deep/ .md-icon.icon-font.md{
    font-size:0.4rem;
  }

  .opinionDetails {
    width: 90%;
    margin: 0 auto;
    margin-top:.3rem;
    box-sizing: border-box;
    padding:0.2rem;
    background: rgba(255, 255, 255, 1);
    border-radius:.3rem;
    position: relative;
  }
  .opinion {
    font-size: 120%;
    width: 50%;
    display: block;
    position: absolute;
    top:0.5rem;
    left:0.5rem;
  }
  textarea {
    width: 90%;
    height:2.5rem;
    border: 0;
    font-size:120%;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(67,48,54,1);
    display:block;
    margin:1.2rem auto;
    background: rgba(244, 244, 244, 1);
  }
  ::-webkit-input-placeholder{
    position: relative;
    top:0.2rem;
    left:0.2rem;
  }
  span {
    font-size:1.5rem;
    font-weight: 400;
    color: rgba(67, 48, 54, 1);
    display: block;
  }
  .record{
    width:20%;
    height:0.566667rem;
    line-height:0.566667rem;
    font-size: 120%;
    font-weight:400;
    color:rgba(211,176,91,1);
    position: absolute;
    bottom: 0.4rem;
    right: 0.4rem;
  }

  .selctbtn{
      width:90%;
      display:flex;
      justify-content:space-around;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  .btn1,.btn2{
    width:160px;
    height :40px;
    line-height:40px;
    text-align:center;
    font-size:17px;
    font-weight:500;
    border-radius:25px;
  }
  .btn1 {
    background:rgba(255,255,255,1);
    border:1px solid rgba(90,67,71,1);
    color:rgba(67,48,54,1);
  }
  .btn2{
    background: #5A4347;
    color:rgba(242,224,179,1);
  }
</style>
